import React, { useState } from 'react'
import ListTitle from '../../../components/SystemPrivileges/ListTitle'
import RoleList from '../../../components/SystemPrivileges/RoleList'
import { Space, Switch, Modal } from 'antd';
import { Link } from 'react-router-dom';
import { useSelector } from 'react-redux'
import Bread from '../../../components/Bread';
import { useDispatch } from 'react-redux';
import { DepartmentUpdateAction, DepartmentDelAction } from '../../../store/systemRoleStore/action';



export default function DepartmentManage() {
    const departmentList = useSelector(state => state.systemRoleStore.departmentList)
    const dispatch = useDispatch()
    const [key, setKey] = useState(0)

    // 表头
    const columns = [{
        title: '部门名称',
        dataIndex: 'department_name',
    },
    {
        title: '职能描述',
        dataIndex: 'function_des',
    },
    {
        title: '成员数量',
        dataIndex: 'member_num',
    },
    {
        title: '添加时间',
        dataIndex: 'add_time',
    },
    {
        title: '是否启用',
        dataIndex: 'is_enable',
        render: (text, record) => (
            <>
                <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={record.is_enable} onChange={
                    (value) => {
                        dispatch(DepartmentUpdateAction({
                            key: record.key,
                            is_enable: Number(value)
                        }))
                    }
                } />
            </>
        )
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <Space>
                <Link to={{
                    pathname: '/home/afterloan/addwarning',
                    loanafter_warning_id: record.loanafter_warning_id,
                    state: 1
                }}>编辑</Link>
                <a data-key={record.key} onClick={(e) => {
                    e.preventDefault()
                    showModal(e.target.dataset.key)
                }}>删除</a>
            </Space>
        )
    }]

    // 删除弹框
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = (key) => {
        console.log("key:", key);
        setKey(key)
        setIsModalVisible(true);
    };

    const handleOk = () => {
        dispatch(DepartmentDelAction(key))
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    return (
        // 部门管理
        <div className='department-manage'>
            <Modal title="删除确定" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} mask maskClosable>
                <p>确认要删除该条数据吗？</p>
            </Modal>
            <Bread bread_title1="系统权限" bread_title2="部门管理" />
            <ListTitle />
            <RoleList columns={columns} data={departmentList || []} />
        </div>
    )
}
